<template>
  <div class="wb-item-img-user" v-if="getVariableItem" :style="itemStyle">
    <div class="img-con" @click.stop="onJump">
      <img v-if="getVariableItem.frontPicUrl" v-lazy="getVariableItem.frontPicUrl">
    </div>
    <div class="user-con">
      <p @click.stop> {{getVariableItem.name}} </p>
      <van-button :style="btnStyles" class="item-in-btn btn-follow" @click.stop="onFollow"></van-button>
    </div>
  </div>
</template>
<script>
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { wbBase } from '@/components/utils/wbBase'
import { EVENT_HOVER_TYPES } from '@/common/events'

export default {
  mixins: [utils, commonUtils, wbBase],
  components: {
  },
  mounted(){
  },
  methods: {
    onFollow(e) {
      let url = "/feact/wb_follow";
      let params = {
        com_id: this.item.id,
        type: EVENT_HOVER_TYPES.follow.type,
        e,
        follow_uid: this.getVariableItem.uid,
        item: this.item
      };
      this.post(url, params);
    },
  }
};
</script>
<style lang="scss">
.wb-item-img-user{
  width: inherit;
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .img-con{
    width: 88%;
    height: 88%;
    margin-left: 6%;

    img{
      width: 100%;
      height: inherit;
      object-fit: contain;
      margin-top: 4%;
    }
  }
  .user-con{
    height: 12%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    align-items: center;


    .btn-follow{
      padding: 0;
    }
  }
}
</style>

